<template>
	<view class="content " style="background-color: white;">
		<u-sticky>
			<view class="top-box" style="background-color: #FFFFFF;z-index: 999;width: 750rpx;">
				<u-tabs :inactiveStyle="{'fontSize':'34rpx'}" :activeStyle="{'fontSize':'34rpx'}" :list="tabList" :current="activeIndex"
					:scrollable="true" lineBgSize="cover" @click="clickTab"></u-tabs>
			</view>
		</u-sticky>
		<view class="searchBox u-m-t-30 u-m-b-56 u-flex u-row-between" style="background-color: #1DA9FF;">
			<view class="searchtext" style="margin-left: 50rpx; ">
				<text class="stext huFamily"> 文章搜索 </text>
			</view>
			<view class="b-rr-44 u-font-24 u-weight-500 u-flex"
				style="width: 430rpx;height: 74rpx;background-color: white;margin-right: 6rpx;">
				<u--input @input="clickSear" @confirm="clickSear" v-model="listData.searchText" placeholder="输入文章名称"
					placeholderStyle="fontSize:28rpx;color:#a8a8a8;"></u--input>
				<view class="u-m-r-20" @click="clickSear">
					<u-icon name="search" color="#666666" size="24"></u-icon>
				</view>
			</view>
		</view>
		<view class="con-list">
			<view :style="item.acImg && item.acImg.length>1?'flex-direction: column;align-items: flex-start;':'' "
				style="width: 690rpx; margin-left: 30rpx;" class="con-item" @click="toDetail(item)"
				v-for="(item,index) in dataList" :key="index">
				<view class="con-title" v-if="item.acImg.length>1">{{item.title}}</view>
				<!-- 图片 -->
				<view style="display: flex;align-items: center; width:100%;margin: 10rpx 0;justify-content: space-between;"  class="img-all">
					<u-image  v-for="(item2,index2) in item.acImg" :key="index2"
						:lazyLoad="true" width="220rpx" height="160rpx" radius="10rpx" class="use-img" :src="item2">
					</u-image>
				</view>
				<view class="con-info" style="flex: 1;margin-left: 20rpx;">
					<view class="con-title" v-if="item.acImg && item.acImg.length == 1">{{item.title}}</view>
					<text
						class="con-time">{{timeDifference($u.timeFormat(new Date(item.publishDate),'yyyy-mm-dd hh:MM'))}}</text>
					<view class="bom-box">
						<view class="bom-item">
							<image style="width: 34rpx;height: 34rpx;" src="https://job.ydylmold.cn/article/image/yanjing.png"
								mode="widthFix"></image>
							<text class="count-text">{{item.browseQty}}</text>
						</view>
						<view class="bom-item" >
							<image style="width: 34rpx;height: 34rpx;" src="https://job.ydylmold.cn/article/image/pinglun.png"
								mode="widthFix"></image>
							<text class="count-text">{{item.commentNum || 0}}</text>
						</view>
						<view class="bom-item" >
							<image v-if="!item.usrThumbsStatus" style="width: 32rpx;height: 32rpx;"
								src="https://job.ydylmold.cn/article/image/dianzan.png" mode="widthFix"></image>
							<image v-else style="width: 32rpx;height: 32rpx;" src="https://job.ydylmold.cn/article/image/zanred.png"
								mode="widthFix"></image>
							<text class="count-text">{{item.usrThumbsNum || 0}}</text>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status"></u-loadmore>
		</view>
		<view class="fix-box" v-if="scrollTop<600" @click="toUrl('/pages/newsPart/manaPage/manaPage')">
			<u-icon name="plus" color="rgb(60, 156, 255)" size="30"></u-icon>
		</view>
		<view class="top-box" @click="scrollTop = 0">
			<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
		</view>
		
	</view>
</template>
<script>
	import {
		queryClassType2,
		queryProtalNews2
	} from '@/common/api/news.js'
	// #ifdef H5
	import {
		onShareData
	} from '@/utils/share.js'
	// #endif
	// #ifdef MP-WEIXIN
	import {
		shareMixins
	} from '@/mixins/share'
	// #endif
	import {
		timeDifference
	} from '@/utils/formaterTime.js'
	import {
		getToken,
		setToken
	} from '@/utils/token.js'
	import {
		duplicateRemoval
	} from '@/utils/common.js'
	export default {
		// #ifdef MP-WEIXIN
		mixins: [shareMixins],
		// #endif
		data() {
			return {
				listData: {
					'page.current': 1,
					searchText: "",
					state: 1,
					typeId: 3,
					contentType: 4,
					classTypeId: 5,
					auditState: 1
				},
				dataList: [],
				tabList: [],
				status: 'loading',
				newType: '',
				newsCompany: '',
				acTab: 0,
				scrollTop: 0,
				activeIndex: 0
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad: function(option) {
			console.log('option', option);
			if (option.title) {
				uni.setNavigationBarTitle({
					title: option.title
				})
			}
			if (option.type) {
				setToken('newType', option.type);
				
				this.activeIndex = option.type - 1;
				this.acTab = option.type - 1;
				this.listData.classTypeId = option.type;
				this.getNewList();
				
				console.log('this.acTab', this.acTab);
				console.log('this.listData.classTypeId', this.listData.classTypeId);
			}
			this.newsCompany = getToken('newsCompany');
			this.newType = getToken('newType');
			this.listData.userNo = getToken('useNum') || '';
			this.queryClassType();
		},
		onPullDownRefresh() {
			this.dataList = [];
			this.listData['page.current'] = 1;
			this.getList();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow: function() {
			// 分享
			let shareInfo = {
				title: getToken('newsTitle') || '热点新闻', // => 名称
				imgUrl: getToken('companyLogo') || 'https://job.ydylmold.cn/mingpian/image/ming-logo.png', // => logo
				desc: getToken('newsCompany') ?
				'行业新闻、营销技巧、专业知识，各种资讯让你看个够！' : '时下热点、行业动态、企业管理、营销技巧、新闻时事，你需要的资讯都有！' //描述
			}
			//初始化分享
			// #ifdef H5
			onShareData(shareInfo);
			// #endif
			// #ifdef MP-WEIXIN
				delete shareInfo.imgUrl
				let pages = getCurrentPages();
				let currentPage = pages[pages.length - 1];
				shareInfo.path = currentPage.$page.fullPath;
				this.$store.commit('setShareWx',shareInfo);
			// #endif
		},
		onReachBottom: function() {
			if (this.status == 'loadmore') {
				this.listData['page.current']++;
				this.getList();
			}
		},
		methods: {
			timeDifference,
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/newsPart/index/newsDetail?newsId=${item.id}`
				})
			},
			toUrl(url) {
				if (url.includes('pages/manaPage/manaPage') && (getToken('useNum') != this.newsCompany)) {
					this.$u.toast('您没有权限')
					return
				}
				uni.navigateTo({
					url: url
				})
			},
			clickSear(e) {
				this.getNewList()
			},
			clickTab(e) {
				console.log(e, 8888)
				this.acTab = e.index;
				this.listData.classTypeId = e.value;
				this.getNewList();
			},
			getNewList(e) {
				this.dataList = []
				this.listData['page.current'] = 1
				this.getList()
			},
			queryClassType() {
				queryClassType2({}).then(res => {
					res = res.data;
					this.tabList = res.listData.map(v => {
						return {
							name: v.typeName || v.classTypeName,
							value: v.typeId
						}
					})
					if(!this.activeIndex) {
						if (getToken('newTypeId')) {
							let idx = this.tabList.findIndex(m => {
								return m.value == getToken('newTypeId');
							})
							if (idx != -1) {
								this.acTab = idx;
								this.listData.classTypeId = this.tabList[idx].value;
								this.getList();
							}
						} else {
							this.listData.classTypeId = this.tabList[0].value;
							this.getList();
						}
					}
				})
			},
			getList() {
				let params = {
					'page.current': this.listData['page.current'],
					searchText: this.listData.searchText,
					state: 1,
					typeId: this.listData.classTypeId,
					userNo: getToken('useNum') || ''
				}
				console.log(params, 999999999)
				queryProtalNews2(params).then(res => {
					res = res.data
					let dataObj = {
						list: res.rows,
						allPage: res.total,
						currPage: res.page.current
					}
					if (dataObj.list && dataObj.list.length) {
						dataObj.allPage <= dataObj.currPage ? this.status = 'nomore' : this.status = 'loadmore'
						let list = dataObj.list
						list.forEach(m => {
							if (m.imgTitle) {
								let arrImg = m.imgTitle.split(',')
								m.acImg = arrImg.map(v => {
									return 'https://www.ydylmold.cn/file/getPlayResource/' + '108/' + v
								})
							}
							//行业新闻和咨询不同点
							m.id = m.newsId
							m.browseQty = m.brows
							m.publishDate = m.createDate
						})
						this.dataList = duplicateRemoval(this.dataList, list, 'id')
					} else {
						this.status = 'nomore'
					}
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	.searchBox {
		margin: 0 30rpx;
		height: 82rpx;
		border-radius: 44rpx;
		align-items: center;

		// padding: 0 12rpx;
		.searchtext {
			margin: 0 26rpx;
			font-size: 40rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);

			.stext {
				text-shadow: 0rpx 6rpx 10rpx 0rpx rgba(0, 0, 0, 0.25);
			}
		}
	}

	.fix-box {
		position: fixed;
		bottom: 300rpx;
		right: 30rpx;
		/* width: 80rpx;
		height: 80rpx; */
		padding: 12rpx;
		background-color: #FFFFFF;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.content {
		background-color: #F0F0F0;
	}

	.con-item {
		display: flex;
		flex-direction: row;
		width: 750rpx;
		align-items: center;
		background-color: #FFFFFF;
		padding: 15rpx 12rpx;
		border-bottom: 1rpx solid #e1e1e1;
		box-sizing: border-box;
	}

	.con-title {
		font-size: 32rpx;
		line-height: 45rpx;
		width: 400rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.use-img{
		margin-right: 15rpx;
		/* #ifdef MP-WEIXIN*/
		margin-right: 30rpx;
		/* #endif*/
	}
	.con-time {
		font-size: 24rpx;
		color: #a8a8a8;
		margin: 10rpx 0;
	}

	.con-img {
		width: 220rpx;
		height: 160rpx;
		margin-right: 20rpx;
	}

	.bom-box {
		display: flex;
		align-items: center;
	}

	.bom-item {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		height: 32rpx;
	}

	.iconitem {
		font-size: 30rpx;
		color: #808080;
		line-height: 40rpx;
		margin-left: 5rpx;
	}

	.count-text {
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #808080;
		margin: 0 10rpx;
	}
</style>
